import React, { Component } from 'react'

export default class Demo extends Component {

  state = { count: 0 }
  add = () => {
    //对象式setState
    //对象式setState其实是函数式setState的一个语法糖
    //如果结果不依赖于原状态，那么用对象式简单。如果依赖原状态那么函数式写法简单。
    // const {count} = this.state
    //setState是React帮你改的，这个是异步的。
    //但是setState引起React更新状态是异步的
    // this.setState({ count: count + 1 },()=>{
    //     console.log('set state callback中的输出',this.state.count);
    // });
    // console.log('set state之后的输出',this.state.count);

    //函数式的setState
    this.setState(state => ({count:state.count+1}))
  }
    
  render() {
    return (
      <div>
        <h1>当前求和为:{this.state.count}</h1>
        <button onClick={this.add}>点我+1</button>
      </div>
    )
  }
}
